@content-font: 'GochiHand';
@content-color: #ffffff;
@controls-font: 'GochiHand';
@controls-color: #00c7ff;
@controls-font-size: 18px;
@content-font-size: 22px;
@close-control-hover-color: #7eff00;

.control() {
    color: @controls-color;
    cursor: pointer;

    font-family: @controls-font;
    font-size: @controls-font-size;
    font-weight: lighter;
}

#jpwClose, #jpwNext, #jpwPrevious, #jpwFinish {
    .control();
}

#jpwOverlay {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 999999;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;

    &.transparent {
        background: none;
    }
}

#jpWalkthrough {

    &.jpw-scrolling .overlay-hole > div {
      box-shadow: inset 0 0 10px 1000px rgba(0, 0, 0, 0.6);
    }

    .overlay-hole > div {
      box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.6);
    }

    #jpwTooltip {
        overflow: visible;
        padding: 10px;
        background: none;
        #tooltipWrapper {
            overflow: visible;
        }
        #bottom-scratch {
            background: url("images/scratch-border.png") no-repeat left top;
            width: 358px;
            height: 42px;
            display: block;
            top: 25px;
            clear: both;
        }
        .draggable-area {
            display: block;
            width: 44px;
            height: 40px;
            position: absolute;
            top: -35px;
            right: -30px;
            background: url("images/drag.png") no-repeat;
            z-index: 10000;
        }
        .top {
            background: url("images/arrow-bottom.png") no-repeat scroll 0 0 transparent;
            bottom: -86px;
            height: 86px;
            left: 130px;
            position: absolute;
            width: 75px;
            display: block;
            z-index: 1000;
        }
        .right {
            background: url("images/arrow-left.png") no-repeat scroll 0 0 transparent;
            height: 56px;
            left: -105px;
            position: absolute;
            top: 35px;
            width: 105px;
            display: block;
            z-index: 1000;
        }
        .bottom {
            background: url("images/arrow-top.png") no-repeat scroll 0 0 transparent;
            height: 86px;
            left: 130px;
            position: absolute;
            top: -86px;
            width: 75px;
            display: block;
            z-index: 1000;
        }
        .left {
            background: url("images/arrow-right.png") no-repeat scroll 0 0 transparent;
            height: 56px;
            position: absolute;
            right: -105px;
            top: 35px;
            width: 105px;
            display: block;
            z-index: 1000;
        }
        #tooltipInner {
            font-family: @content-font;
            color: @content-color;
            text-align: center;
            font-size: @content-font-size;
            a {
                font-size: @content-font-size;
            }
            .tooltipTitle {
                font-size: 40px;
            }
        }
    }
    .killOverlay {
        background-image: none !important;
        background-color: none !important;
    }
}
#jpwClose {
    position: fixed;
    top: 65px;
    right: 25px;
    z-index: 1000000;

    color: @content-color;
    text-align: center;
    display: block;

    &:hover {
        color: @close-control-hover-color;
    }

    &:before {
        content: '';
        display: inline-block;
        *display: inline;
        *zoom: 1;
        width: 44px;
        height: 40px;
        background: url("images/close.png") no-repeat;
        position: absolute;
        top: -45px;
        left: 36px;
    }
}

#jpwNext, #jpwFinish {
    float: right;
}

#jpwPrevious {
    float: left;
}

@font-face {
    font-family: 'GochiHand';
    src: url('font/GochiHand-Regular.eot');
    font-weight: normal;
    font-style: normal;
    font-family: 'GochiHand';
    src: url('font/GochiHand-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

